<template>
  <div class="main">
    <div class="left">
      <el-tree
        ref="MyTree"
        :data="classify"
        :props="defaultProps"
        accordion
        node-key="id"
        @node-click="handleNodeClick"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <img
            v-if="data.routerName == activeName"
            :src="data.selectImg"
            alt=""
          />
          <img
            v-if="data.routerName != activeName"
            :src="data.normalImg"
            alt=""
          />
          <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </div>
    <div class="right">
      <transition name="el-fade-in" mode="out-in">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
      </transition>
      <transition name="el-fade-in" mode="out-in">
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
import selectImg1 from "@img/resources/icon-list01-select.png";
import normalImg1 from "@img/resources/icon-list01-normal.png";
import selectImg2 from "@img/resources/icon-list02-select.png";
import normalImg2 from "@img/resources/icon-list02-normal.png";
import selectImg3 from "@img/resources/icon-list03-select.png";
import normalImg3 from "@img/resources/icon-list03-normal.png";
export default {
  data() {
    return {
      classify: [],
      activeName: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  watch: {
    "$route.name": function(newVal, oldVal) {
      this.activeName = newVal;
      this.classify.map((item) => {
        if (item.routerName == newVal) {
          // this.$router.push({ name: item.routerName });
          this.$refs.MyTree.setCurrentKey(item.id);
        }
      });
    },
  },
  mounted() {
    this.$bus.$emit("setActive", "resources");
    let flag = this.$store.state.flag;
    if (flag == 2) {
      let pageList = localStorage.getItem("pageList").split(",");
      if (pageList.includes("6") == true) {
        this.classify.push({
          id: 0,
          label: "产业地图",
          routerName: "industrymap",
          children: [],
          selectImg: selectImg1,
          normalImg: normalImg1,
        });
      }
      if (pageList.includes("7") == true) {
        this.classify.push({
          id: 1,
          label: "项目选址",
          routerName: "estimate",
          children: [],
          selectImg: selectImg2,
          normalImg: normalImg2,
        });
      }
      if (pageList.includes("8") == true) {
        this.classify.push({
          id: 2,
          label: "数据填报",
          routerName: "filling",
          selectImg: selectImg3,
          normalImg: normalImg3,
        });
      }
    } else {
      this.classify = [
        {
          id: 0,
          label: "产业地图",
          routerName: "industrymap",
          children: [],
          selectImg: "",
          normalImg: "",
        },
        {
          id: 1,
          label: "项目选址",
          routerName: "estimate",
          children: [],
          selectImg: "",
          normalImg: "",
        },
      ];
    }
    if (this.activeName != "") {
      // this.$router.push({ name: this.activeName });
    } else {
      if (this.$route.name == "industrymap") {
        // this.$nextTick(() => {
        //   this.$router.push({ name: this.classify[0].routerName });
        //   this.$refs.MyTree.setCurrentKey(this.classify[0].id);
        // });
        this.$nextTick(() => {
          this.activeName = "industrymap";
          this.$router.push({ name: "industrymap" });
          this.$refs.MyTree.setCurrentKey(0);
        });
      } else if (this.$route.name == "estimate") {
        this.$nextTick(() => {
          this.activeName = "estimate";
          this.$router.push({ name: "estimate" });
          this.$refs.MyTree.setCurrentKey(1);
        });
      } else if (this.$route.name == "filling") {
        this.$nextTick(() => {
          this.activeName = "filling";
          this.$router.push({ name: "filling" });
          this.$refs.MyTree.setCurrentKey(2);
        });
      } else {
        this.$nextTick(() => {
          this.activeName = this.classify[0].routerName;
          this.$router.push({ name: this.classify[0].routerName });
          this.$refs.MyTree.setCurrentKey(this.classify[0].id);
        });
      }
    }
    window.addEventListener("popstate", (e) => {
      if (this.$refs.MyTree) {
        //处理左侧选项卡未选中
        this.activeName = this.$route.name;
        this.classify.map((item) => {
          if (item.routerName == this.$route.name) {
            this.$refs.MyTree.setCurrentKey(item.id);
          }
        });
      }
    });
  },
  methods: {
    handleNodeClick(data) {
      this.activeName = data.routerName;
      this.$router.push(data.routerName);
      this.$refs.MyTree.setCurrentKey(data.id);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-table td,
.el-table th {
  padding: 0;
}
.main {
  height: 100%;
  background: #f0f0f0;
  overflow: hidden;
  display: flex;
}
.left {
  flex: 0 0 300px;
  height: 100%;
  margin-right: 30px;
}
.right {
  flex: 1;
  background: #fafafa;
  display: flex;
}
.el-tree {
  height: 100%;
  background: #ffffff;
  font-family: Microsoft YaHei;
  font-size: 16px;
  box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.05);
  color: #666;
}
/deep/ .el-tree-node {
  cursor: pointer;
}
/deep/ .el-tree-node__content {
  height: 60px;
  line-height: 60px;

  img {
    width: 26px;
    height: 26px;
    margin-right: 10px;
    vertical-align: middle;
  }
  span {
    font-weight: 400;
    font-size: 20px;
    color: #333;
    vertical-align: middle;
  }
}
/deep/ .is-current .el-tree-node__content .custom-tree-node span {
  font-weight: bold;
  color: #446db3;
}
/deep/ .el-tree-node__children {
  .el-tree-node__content {
    height: 50px;
    line-height: 50px;
    background: #f7faff;
    .el-tree-node__label {
      font-size: 16px;
    }
  }
}
/deep/.el-tree-node__children {
  .el-tree-node__label {
    font-weight: 400;
    color: #666;
  }
}
/deep/ .el-tree-node__content {
  padding: 0 30px !important;
}
/deep/ .el-tree-node__children {
  .el-tree-node__content {
    padding: 0 30px 0 48px !important;
  }
}
/deep/.is-expanded {
  .el-tree-node__content {
    position: relative;
    .el-tree-node__label {
      font-weight: bold;
      font-size: 20px;
      color: #446db3;
    }
  }
  .el-tree-node__children {
    background: #f7faff;

    .el-tree-node__label {
      font-weight: 400;
      font-size: 16px;
      color: #666;
    }
  }
}
/deep/ .el-tree-node.is-current > .el-tree-node__content {
  background: #e9f3ff;
  border-right: 4px solid #446db3;
}
/deep/.el-tree > .el-tree-node:hover > .el-tree-node__content {
  background: #e9f3ff;
}
// /deep/.el-tree > .el-tree-node:focus > .el-tree-node__content {
//   background: #fff;
// }

/deep/.is-current > .el-tree-node__content > .el-tree-node__label {
  font-weight: bold;
  color: #446db3 !important;
}
/deep/ .el-tree-node__children .is-current > .el-tree-node__content {
  color: #446db3;
  background: #e9f3ff;
  border-right: 4px solid #446db3;
}
/deep/ .el-tree-node__expand-icon {
  position: absolute;
  cursor: default;
  right: 10px;
}

/deep/.el-tree-node__content {
  .el-icon-caret-right:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    display: block;
    background: url("~@img/resources/icon-page-right.png") no-repeat center;
  }
  // .el-icon-caret-right
  .expanded:before {
    display: block;
    width: 10px;
    height: 10px;
    background: url("~@img/resources/sidenav-hover2.png") no-repeat center;
  }
  .el-tree-node__expand-icon.is-leaf:before {
    background-image: unset;
  }
}
/deep/ .el-tree-node__content {
  cursor: pointer;
}
/deep/.is-current .el-tree-node__content {
  .el-icon-caret-right:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    display: block;
    background: url("~@img/resources/sidenav-hover2.png") no-repeat center;
  }
  // .el-icon-caret-right
  .expanded:before {
    display: block;
    width: 10px;
    height: 10px;
    background: url("~@img/resources/sidenav-hover2.png") no-repeat center;
  }
  .el-tree-node__expand-icon.is-leaf:before {
    background-image: unset;
  }
}
// /deep/ .el-icon-caret-right:before {
//   display: block;
//   width: 10px;
//   height: 10px;
//   content: "";
//   background: url("") no-repeat center
//     center;
// }
// /deep/.is-current > div > span.el-icon-caret-right:before {
//   display: block;
//   width: 10px;
//   height: 10px;
//   content: "";
//   background: url("~@img/resources/sidenav-hover2.png") no-repeat center
//     center;
// }
// // 右侧图标 位置  不重复
/deep/.el-tree
  > .el-tree-node
  > .el-tree-node__content
  > .el-tree-node__label::before {
  width: 26px;
  height: 26px;
  display: inline-block;
  content: "";
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -4px;
}

/deep/.el-tree
  > .el-tree-node:nth-child(1)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/resources/icon-list01-normal.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(1).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/resources/icon-list01-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(1).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/resources/icon-list01-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(2)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/resources/icon-list02-normal.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(2).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/resources/icon-list02-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(2).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/resources/icon-list02-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(3)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/resources/icon-list03-normal.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(3).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/resources/icon-list03-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(3).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/resources/icon-list03-select.png") no-repeat center;
}
@media screen and (max-device-width: 1180px) {
  .left {
    flex: 0 0 200px;
  }
}
</style>
